<template>
  <div>
    <div class="header">
      <div class="mask-img">
        <div class="left-box">
          <div class="left-content">
            <p>每日推荐</p>
            <p>上瘾</p>
            <p>尼尔 · 埃亚尔等</p>
            <p>如何让用户产生依赖?让人不知不觉就“上瘾”?</p>
          </div>
        </div>
        <div class="right-box">
          <div class="bgbox">
            <img src="../assets/images/books.jpg" alt="" />
          </div>
        </div>
      </div>
      <div class="left-block"></div>
      <div class="right-block"></div>
    </div>
    <div :style="{ opacity: op == 0 ? 0 : 1 }" class="header-title">
      <span>首页</span>
    </div>
    <div class="news">
      <img src="../assets/images/new.png" alt="" />
    </div>
    <gm-title>
      <template v-slot:left-title> 最新上架 </template>
      <template v-slot:right-more> 更多 </template>
    </gm-title>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide swiper-first"
          v-for="item in newinfo"
          :key="item.id"
        >
          <gm-picinfo
            :imgUrl="item.picUrl"
            :title="item.name"
            :author="item.author"
            :text="item.text"
            @setData="getDatas"
          >
          </gm-picinfo>
        </div>
      </div>
    </div>
    <gm-title>
      <template v-slot:left-title> 适合你的 </template>
      <template v-slot:right-more> 更多 </template>
    </gm-title>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide swiper-first"
          v-for="item in youinfo"
          :key="item.id"
        >
          <gm-picinfo
            :imgUrl="item.picUrl"
            :title="item.name"
            :author="item.author"
            :text="item.text"
            @setData="getDatas"
          ></gm-picinfo>
        </div>
      </div>
    </div>
    <gm-title>
      <template v-slot:left-title> 书籍专题 </template>
      <template v-slot:right-more> 更多 </template>
    </gm-title>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div
          v-for="item in topicinfo"
          :key="item.id"
          class="swiper-slide swiper-two"
        >
          <gm-topic :imgUrl="item.imgUrl" :arr="item.arr"></gm-topic>
        </div>
      </div>
    </div>
    <gm-title>
      <template v-slot:left-title> 虫洞说 </template>
      <template v-slot:right-more> 更多 </template>
    </gm-title>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div
          v-for="item in cdinfo"
          :key="item.id"
          class="swiper-slide swiper-cdsay"
        >
          <gm-cdsay :imgUrl="item.imgUrl" @setData="getDatas"></gm-cdsay>
        </div>
      </div>
    </div>
    <gm-title>
      <template v-slot:left-title> 书签 </template>
      <template v-slot:right-more>
        <span class="iconfont icon-right-arrow"></span>
      </template>
    </gm-title>
    <div class="bookmarks">
      <img src="../assets/images/bookmarks.jpg" alt="" />
    </div>
    <gm-title>
      <template v-slot:left-title> 热门推荐 </template>
    </gm-title>
    <gm-hot
      v-for="item in newinfo"
      :key="item.id"
      :title="item.name"
      :author="item.author"
      :text="item.text"
      :imgUrl="item.picUrl"
      @setData="getDatas"
    ></gm-hot>
    <div
      :style="{ opacity: op == 0 ? 0 : 1 }"
      @click="returnTop"
      class="return-top"
    >
      <span class="iconfont icon-top-arrow"></span>
    </div>

    <transition
      :duration="{ enter: 800, leave: 500 }"
      enter-active-class="animate__animated animate__fadeInUp"
      enter-to-class="animate__animated animate__fadeInUp"
      leave-active-class="animate__animated animate__fadeOutDown"
      leave-to-class="animate__animated animate__fadeOutDown"
    >
      <div v-if="showi" class="showDetails">
        <gm-details :infoObj="infoObj" @detailsClose="getClose"></gm-details>
      </div>
    </transition>
  </div>
</template>

<script>
import gmTitle from "@/components/gmTitle.vue";
import gmPicinfo from "@/components/gmPicinfo.vue";
import gmTopic from "@/components/gmTopic.vue";
import gmCdsay from "@/components/gmCdsay.vue";
import gmHot from "@/components/gmHot.vue";
import gmDetails from "@/pages/details.vue";

export default {
  name: "Home",
  components: {
    gmTitle,
    gmPicinfo,
    gmTopic,
    gmCdsay,
    gmHot,
    gmDetails,
  },
  data() {
    return {
      newinfo: [],
      youinfo: [],
      topicinfo: [],
      cdinfo: [],
      op: 0,
      showi: false,
      infoObj: {},
      cdImg: "",
    };
  },
  methods: {
    getData() {
      let url = "data/listen.json";
      let gms = axios.get(url);
      gms.then((res) => {
        this.newinfo = res.data.resultNew;
        this.youinfo = res.data.resultYou;
        this.topicinfo = res.data.resultTopic;
        this.cdinfo = res.data.cdSay;
      });
    },
    show() {
      let scrollTop = document.documentElement.scrollTop;
      if (scrollTop > 170) {
        this.op = 1;
      } else {
        this.op = 0;
      }
    },
    returnTop() {
      document.documentElement.scrollIntoView({
        block: "start",
        behavior: "smooth",
      });
    },
    getDatas(obj) {
      this.infoObj = obj.infoObj;
      this.showi = obj.flag;
    },
    getClose(val) {
      this.showi = val;
    },
  },
  mounted() {
    this.getData();
    const mySwiper = new Swiper(".swiper-container", {
      slidesPerView: "auto",
      observer: true, //修改swiper自己或子元素时，自动初始化swiper
      observeParents: true, //修改swiper的父元素时，自动初始化swiper
      spaceBetween: 20,
      freeMode: true,
    });
    window.addEventListener("scroll", this.show);
  },
};
</script>

<style lang="scss" scoped>
$color: #dc912c;
.header {
  height: 226px;
  background-image: url(../assets/images/bgimg.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center center;
  position: relative;
  display: flex;
  justify-content: center;

  .mask-img {
    width: 340px;
    height: 170px;
    position: absolute;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 99;
    display: flex;
    .left-box {
      width: 200px;
      height: 170px;
      display: flex;
      justify-content: center;
      align-items: center;
      .left-content {
        padding: 0 12px;
        box-sizing: border-box;
        p:nth-child(1) {
          font-size: 20px;
          font-weight: bold;
        }
        p:nth-child(2) {
          font-size: 16px;
          margin: 10px 0 6px 0;
        }
        p:nth-child(3) {
          margin-bottom: 8px;
        }
        p {
          font-size: 12px;
        }
      }
    }
    .right-box {
      width: 120px;
      .bgbox {
        width: 120px;
        img {
          width: 100%;
          transform: translateY(25%);
        }
      }
    }
  }
  .left-block,
  .right-block {
    width: 18px;
    height: 26px;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    z-index: 99;
  }
  .left-block {
    left: 0;
  }
  .right-block {
    right: 0;
  }
}
.news {
  width: 50px;
  height: 50px;
  position: fixed;
  top: 0;
  right: 6px;
  z-index: 99999;
  img {
    width: 100%;
  }
}
.header-title {
  width: 100%;
  height: 54px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  padding-left: 20px;
  z-index: 88888;
  transition: all 0.4s linear;
  span {
    font-size: 22px;
    line-height: 54px;
  }
}
.swiper-container {
  padding-left: 20px;
  padding-right: 20px;
  .swiper-first {
    width: 138px;
  }
  .swiper-two {
    width: 298px;
    padding: 6px 0;
    box-sizing: border-box;
  }
  .swiper-cdsay {
    width: 220px;
  }
}
.bookmarks {
  display: flex;
  justify-content: center;
  img {
    width: 340px;
    border-radius: 4px;
  }
}
.return-top {
  position: fixed;
  right: 20px;
  bottom: 100px;
  width: 42px;
  height: 42px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  box-shadow: 0 0 4px 2px #ddd;
  z-index: 99999;
  transition: all 0.3s linear;
  span {
    display: block;
    text-align: center;
    line-height: 42px;
    color: $color;
  }
}
.showDetails {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #fffaf0;
  z-index: 999999;
}
</style>